<ui:composition template="../market/templateBootstrap.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<!-- Tiene que tener un head para que tome primefaces -->
	<h:head></h:head>
	
	<ui:define name="itemsCD">		
		<!-- <div class="table-responsive" > -->
		

							<link href='../css/item.css' rel='stylesheet' type='text/css'></link>	
<!-- 							<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'></link> -->
							<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> -->						
									
		
<!-- <div class="wrapper table table-hover panel panel-default"> -->			
	
	<!-- Lo use para probar la tabla de primefaces -->
	<style>
.ui-datagrid-content {
	border: none;
}
/* No se porque pero esto me deja que los items se alinen */
.ui-datagrid-column {
	/* background-color: transparent; */
	float: left;
	padding-left: 60px;
}

.ui-widget-content {
	border: 0px;
	padding: 10px;
	background-color: transparent;
}
/* .ui-datagrid{
background-color: transparent;
} */
</style>
			<div class="row col-xs-6 col-md-3">
			    
			    <p:dataGrid id="dataTable" var="cd" value="#{versionBean.obtenerContenidosAutorizados()}" resizableColumns="true" columns="18">

							<!-- <section class="row col-xs-6 col-md-3  thumbnail"> -->
							<section>

								<div class="container-item thumbnail" id="#{cd.nombre}">
									<div class="item" id="#{cd.nombre}">

										<p:graphicImage id="NombreId" value="/Imagenes/#{cd.nombre}.jpg" style="width:160px; height:auto; vertical-align:middle;" >
								            <f:param name="id" value="#{cd.nombre}" />
        								</p:graphicImage>

										<div class="item-overlay">
											<!-- <a href="#" class="item-button play"><i class="play"></i></a> -->
											<a href="#" class="item-button share share-btn"><span class="glyphicon glyphicon-share"></span></a>
											<div class="sale-tag"><span>NEW</span></div>
										</div>
										
										<div class="item-content">
											<div class="item-top-content">
												<div class="item-top-content-inner">
													<div class="item-product">
														<div class="item-top-title">
															<h2 style="margin-top:2px; margin-bottom:2px;">
																<h:outputText value="#{cd.nombre}"/>
															</h2>															
															<h:outputText value="#{cd.descripcion}" styleClass="subdescription"/>															
														</div>
													</div>
													<div class="item-product-price">
														<span class="price-num">$17</span>
														<!-- <p class="subdescription">$36</p> -->
														<!-- <div class="old-price"></div> -->
													</div>
												</div>	
											</div>
											<div class="item-add-content">
												<div class="item-add-content-inner">
													<div class="section">
														<a href="#" class="btn buy expand" style="padding:0px;"><span class="glyphicon glyphicon-save"></span>  Descargar </a>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="item-menu popout-menu" id="#{cd.nombre}">
										<ul>
											<li><a href="#" class="popout-menu-item">Share</a></li>
											<li><a href="#" class="popout-menu-item">Info</a></li>
											<li><a href="#" class="popout-menu-item">Seller</a></li>
										</ul>
									</div>
								</div>
							</section>

			    </p:dataGrid>
			   	<p:resizable for="dataTable" aspectRatio="true"/>
			</div>
<!-- </div>			 -->
			
												
						<script src="../js/item.js"></script>
						

		<!-- </div> -->
		<!-- <iframe width="440" height="260" src="item.html" scrolling="no" frameborder="no" ></iframe> -->		
	</ui:define>
</ui:composition>
